<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 页面标题 -->
    <view class="bg-white px-[32rpx] py-[24rpx] border-b border-gray-100">
      <view class="flex items-center">
        <!-- <view class="w-[40rpx] h-[40rpx] bg-[#41916c] rounded-full flex items-center justify-center mr-[16rpx]">
          <IconFont name="dongdong" size="20" color="#ffffff"></IconFont>
        </view> -->
        <text class="text-[36rpx] font-bold text-[#333333]">风险告知书</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="bg-white p-[32rpx] mb-[20rpx]">
      <view class="text-[28rpx] text-gray-700 leading-[1.8]">
        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">一、风险说明</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            护理服务过程中可能存在一定的风险，请您充分了解并谨慎考虑。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">二、常见风险</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 护理操作风险：如翻身、移动等操作可能造成不适。<br/>
            2. 医疗风险：如输液、换药等操作可能存在感染风险。<br/>
            3. 设备风险：如使用医疗设备可能出现意外情况。<br/>
            4. 环境风险：如地面湿滑、设备故障等环境因素。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">三、预防措施</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 严格遵循护理操作规范。<br/>
            2. 定期检查医疗设备状态。<br/>
            3. 保持服务环境安全整洁。<br/>
            4. 及时处理异常情况。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">四、应急处理</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 发生意外时立即停止操作。<br/>
            2. 及时报告医护人员处理。<br/>
            3. 必要时拨打急救电话。<br/>
            4. 做好相关记录和报告。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">五、免责声明</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 因不可抗力造成的损失不承担责任。<br/>
            2. 因患者隐瞒病情造成的后果不承担责任。<br/>
            3. 因患者不配合造成的后果不承担责任。<br/>
            4. 因第三方原因造成的损失不承担责任。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">六、保险保障</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 服务人员已购买相关保险。<br/>
            2. 发生意外时按保险条款处理。<br/>
            3. 超出保险范围的部分协商解决。<br/>
            4. 建议患者购买相关保险。
          </text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-[24rpx] safe-area-bottom">
      <nut-button 
        type="primary" 
        size="large" 
        class="w-full bg-[#41916c] border-0"
        @tap="goBack"
      >
        我已了解风险
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';

definePageConfig({
  navigationBarTitleText: '风险告知书',
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black'
});

const goBack = () => {
  Taro.navigateBack();
};
</script>

<style>
.safe-area-bottom {
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}
</style> 